<template>
  <div style="
  position: absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
                margin:auto;
                height:100%;
                width:370px;
">
    <div>
      <!--        bisque   burlywood-->
      <div style="width: 100%;height: 100px;margin-top: 20px">
        <!--        <div style="width: 100%;height: 25%">-->
        <!--          <img src="./static/images/力合新图表.jpg" style="width: 100px;height: 100px;margin-top: 15px;-->
        <!--            float: left;border-radius: 50%;-->
        <!--            margin-left: 15px;box-shadow: 0 0 10px burlywood; /* 发光效果 */">-->
        <!--        </div>-->
        <div style="width: 100%;height: 25%">
          <span style="font-weight: bold;margin-left: 15px;font-size: 21px;float: left;border-radius: 50%;">2024年长护(上海)居家照护培训 </span>
        </div>
        <div style="width: 100%;height: 25%;margin-top: 10px;margin-bottom: -10px">
          <span
              style="font-weight: bold;margin-left: 15px;font-size: 17px;float: left;border-radius: 50%;">创客老师：{{ this.name }}</span>
        </div>
        <div style="width: 100%;height: 25%">
          <span
              style="font-weight: bold;margin-left: 15px;font-size: 16px;float: right;border-radius: 50%;color: red;text-align: left">
            <p style="text-align: left">提示：学员当天报名的费用会在明天5点之前自动转账到您得微信零钱账户。</p>
            <p style="text-align: left;font-size: 12px;color: black">
              已返费:绿色框,
              待返费:红色框
            </p>
          </span>
        </div>
        <br>
        <br>
        <br>
        <hr>
      </div>
    </div>
    <h1 style="margin-bottom: 10px;margin-top: 70px">我的明细列表</h1>
    <div style="width: 100%;text-align: center;margin:auto">
      <el-card v-for="item in sortedItems" :key="item" :class="getCardColor(item.ffType)"
               style="margin-top: 10px;font-size: 16px">
        <span style="float: left;width: 140px;">
          <span class="span1" style="float: left">学员姓名:{{ item.name }}  </span>
        </span>
        <span style="float: right;width: 185px;">
          <span class="span1" style="float: left">学员手机:{{ item.phone }} </span>
        </span>
        <span style="float: left;width: 140px;">
          <span class="span1" style="float: left">缴费金额:{{ item.money }}</span>
        </span>
        <span style="float: right;width: 185px">
          <span class="span1" style="float: left">预计返费金额:{{ item.rebate }}</span>
        </span>
        <span style="float: left;width: 280px;">
          <span class="span1" style="float: left">缴费时间:{{ item.zfTime }}  </span>
        </span>
        <span style="float: left;margin-bottom: 20px;width: 320px;">
          <span class="span1" style="float: left">返费时间:
               <span v-if="item.ffTime" style="margin-left: -5px">{{ item.ffTime }}</span>
               <span v-else style="margin-left: -5px">待返费</span>
          </span>


        </span>
        <!--        <span style=""><span class="span1">返费状态：</span>{{ item.ffType }}</span>-->
      </el-card>
    </div>
  </div>
</template>
<script>

// import {SelectTeacherData} from '@/api/WeiXin.js'
// import QRCode from "qrcode";

export default {
  data() {
    return {
      detailList: [],
      openid: '',
      amount: 0,
      name: '',
      sortedItems: []
    };
  },
  methods: {
    getCardColor(ffType) {
      if (ffType === "已返费") {
        return 'red-card';
      }
      if (ffType === "待返费") {
        return 'green-card';
      }
    },
    sortItemsByZfTimeDesc() {
      // 假设 zfTime 是可以比较的日期字符串
      return this.detailList.sort((a, b) => {
        // 直接对字符串进行比较，这将按字典顺序排序
        if (a.zfTime < b.zfTime) {
          return 1; // b 应该排在 a 前面（降序）
        }
        if (a.zfTime > b.zfTime) {
          return -1; // a 应该排在 b 前面（降序）
        }
        return 0; // a 和 b 相等
      });
    }
  },
  created() {
    let data = this.$route.params.detailList;
    let name = this.$route.params.name;
    if (data != null) {
      this.detailList = data;
    }
    if (name != null) {
      this.name = name;
    }
    this.sortedItems = this.sortItemsByZfTimeDesc();
    for (let i = 0; i < this.detailList.length; i++) {
      this.amount = parseInt(this.detailList[i].rebate) + this.amount
    }
  }
};
</script>
<style scoped>
.centered-div {
  /*position: fixed; !* 绝对定位 *!*/
  /*top: 40%; !* 距离顶部50% *!*/
  /*left: 50%; !* 距离左侧50% *!*/
  /*transform: translate(-50%, -50%); !* 使用transform属性进行偏移，以确保元素正好在中心 *!*/
  /* 你可以添加更多的样式，如宽度、高度、背景色等 */
  width: 250px;
  height: 250px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box; /* 包括边框和内边距在内的宽度和高度 */
}

.span1 {
  font-weight: bold;
}

.green-card {
  background-color: rgba(255, 0, 0, 0.2); /* 红色，50% 透明度 */
  /* 其他样式 */
}

.red-card {
  background-color: rgba(0, 255, 0, 0.2); /* 绿色，50% 透明度 */
  /* 其他样式 */
}
</style>
